<template>
  <div class="box">
    <header class="header">
        <van-search
          v-model="keyword"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch"
        >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
        </van-search>
    </header>
    <div class="content">
      <van-sidebar v-model="activeKey" @change="onChange" class="lieb">
        <van-sidebar-item
        v-for="(item,index) of cateGorylist"
        :key="index"
        :title= "item">
        </van-sidebar-item>
      </van-sidebar>
      <div class="pinp">
        <div
         v-for="(item,index) of category"
        :key="index"
        >{{ item.brand }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { Search, Sidebar, SidebarItem } from 'vant'
import { getcateGorylist, getcateGorybrandlist } from './../../api/kind'

Vue.use(Search)
Vue.use(Sidebar)
Vue.use(SidebarItem)
export default {
  data () {
    return {
      cateGorylist: [],
      category: [],
      keyword: '',
      activeKey: 0
    }
  },
  methods: {
    onSearch () {
      this.$router.push('/searchresult?keywoed=' + this.keyword)
    },
    onChange (index) {
      getcateGorybrandlist({
        category: this.cateGorylist[index]
      }).then(res => {
        console.log(res.data)
        this.category = res.data.data
      })
    }
  },
  mounted () {
    getcateGorylist().then(res => {
      this.cateGorylist = res.data.data
      console.log(res.data.data)
      getcateGorybrandlist({ category: this.cateGorylist[this.activeKey] }).then(res => {
        this.category = res.data.data
        console.log(res.data.data)
      })
    })
  }
}
</script>
<style lang="stylus" scoped>
.van-search
  padding 5px 12px
  .van-search__content
    margin-left 12px
.lieb
  float left
.pinp
  float left
</style>
